<html>

<head>
  <meta charset="utf-8">
  <title>相机动画</title>
  <script src='../w3d.js' type="text/javascript"></script>
  <script src='../config.js' type="text/javascript"></script>
  <script src='../../lib/lil-gui.umd.min.js' type="text/javascript"></script>
  <script type="text/javascript">

    let engine, scene, canvas, body,geometry,sampler,samplerRoll,samplerPitch,entity,camera;
    function init () {
      canvas = document.getElementById('canvas');
      body = document.getElementById('body');
     let path=[
        `../../demo/pub/assets/skybox/twilight/pos-x.jpg`,
        `../../demo/pub/assets/skybox/twilight/neg-x.jpg`,
        `../../demo/pub/assets/skybox/twilight/pos-y.jpg`,
        `../../demo/pub/assets/skybox/twilight/neg-y.jpg`,
        `../../demo/pub/assets/skybox/twilight/pos-z.jpg`,
        `../../demo/pub/assets/skybox/twilight/neg-z.jpg`
        ]
      engine = new w.Engine({auth,
        canvas: canvas,
        contextmunu:false,//是否支持右键菜单
        background: path,
        environment: path,
        intensity:1,
        gamma:1.5,
        ambientColor:"#ffffff",
        ambientIntensity:1.0
      });
      engine.init(this.initGPU);
    }
    function initGPU () {
      scene=engine.scene;
      scene.postProcessing.add(new w.effects.Fxaa());
      scene.orbit.maxPitch=Math.PI/3;//限制操作相机的orbit组件的最大倾斜角度。
      initCamera();//初始化相机姿态
      addMesh();//添加点
      addAnimation('none');
      initGUI();
    }
    function initCamera(){
      camera = engine.scene.getCamera()
      camera.near = 0.1;
      camera.far = 100000;
      camera.trans.position=[0,0,300];
      camera.pitch=Math.PI/6;
    }
    function addMesh () {
      engine.res.gltfLoader.load(ip + 'demo/pub/assets/testmodel/OUT/out.gltf', { position: [0, 0, 0], rotation: [Math.PI/2, 0, 0], scale: [1, 1, 1] ,indexedDB:true }, (gltf) => {
        engine.scene.addEntity(gltf);
      });
    }
    function addAnimation(easing){
        let animation=new w.animation.Animation({id:"hkdl",loop:0});
        //position
        sampler=new w.animation.Sampler([0,6,12], [[0, 0, 300], [0, -200, 50],[0, 0, 300]],"LINEAR", easing);
        let channel=new w.animation.Channel(camera.trans,"position");
        channel.add(sampler);
        animation.add(channel);
        
        //roll
        samplerRoll=new w.animation.Sampler([0,6,12], [0, Math.PI*2,0],"LINEAR", easing);
        let channelRoll=new w.animation.Channel(camera,"roll");
        channelRoll.add(samplerRoll);
        animation.add(channelRoll);

        //pitch
        samplerPitch=new w.animation.Sampler([0,6,12], [Math.PI/6,Math.PI/3,Math.PI/6],"LINEAR", easing);
        let channelPitch=new w.animation.Channel(camera,"pitch");
        channelPitch.add(samplerPitch);
        animation.add(channelPitch);

        scene.addAnimation(animation);
    }

    function initGUI(){
        const GUI = lil.GUI;
        const gui = new GUI();
        let folder = gui.addFolder('animation');
        folder.add(sampler, 'easing', easing);
        folder.add(samplerRoll, 'easing', easing);
        folder.add(samplerPitch, 'easing', easing);
    }

  </script>
  <style>
    html,
    body,
    #canvas {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body onload="init()">
  <canvas id="canvas"></canvas>
</body>

</html>